<!-- 解决方案查看 -->

<template>
    <div>
      
      <h3 class="notitle">当前页面：{{ $route.meta.title }}</h3>
            <el-card style="width: 100%; height: 700px; margin-right: 10px">
            
            <div class="item-1">
              <span style="font-size: 20px;">项目名称</span>
              <el-divider direction="vertical" ></el-divider>
                <span  style="font-size: 20px;margin-left: 150px;">
                    {{ name }}
                </span>
            </div>
            <el-divider></el-divider>
            <div class="item-2">
              
              <span style="font-size: 20px;">问题描述</span>
              <el-divider direction="vertical" ></el-divider>
                <span  style="font-size: 20px;margin-left: 150px;">
                    {{ text }}
                </span>
            </div>
             
            <el-divider></el-divider>
             
              <div class="item" >
                <!-- <el-card style="width: 60%; margin-right: 10px"> -->
                <!-- <div slot="header" class="clearfix" > -->
                  <span style="font-size: 20px;">下载文件</span>
                <!-- </div> -->
                <el-divider direction="vertical" ></el-divider>
                <!-- <div class="clearfix-2"> -->
                    <el-button  type="primary"   @click="handle()"
                    class="change-1">
                      下载文件
                    </el-button>
                <!-- </div> -->
                
                <!-- </el-card> -->
              </div>
              <el-divider></el-divider>
              
              <div class="item-3">
                <span style="font-size: 20px;">解决方案</span>
                <el-divider direction="vertical" ></el-divider>
                <el-card   class="limit">
                    {{ slovetext }}
                </el-card >
              </div>
                  
              
            </el-card>
                       
              <div class='container'>
                <el-button  type="success"  @click="to()"
                  class="change-2">
                      提交方案
                  </el-button>
                  <el-button  type="warning"  @click="go()"
                  class="change-3">
                      修改方案
                  </el-button>
                  <el-button  type="danger"  @click="remove()"
                  class="change-3">
                      删除方案
                  </el-button>
                  <el-button  type="primary"  @click="back()"
                  class="change-4">
                      返回
                  </el-button>
              </div>
  
            <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            append-to-body
            top="20%"
            
            ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
            <span>确认删除吗</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="yes()">确 定</el-button>
            </span>
            </el-dialog>
  
            <el-dialog
            title="提示"
            :visible.sync="error"
            width="30%"
            append-to-body
            top="20%"
            
            ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
            <span>{{ message }}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="error = false">取 消</el-button>
                <el-button type="primary" @click="error = false">确 定</el-button>
            </span>
            </el-dialog>
  
      <!-- </el-card> -->
    </div>
  </template>
  
  <script>
  import http from "@/utils/request"
  import create from "@/mixins/create";
  import E from "wangeditor"
  import { remove } from "lodash-es";
  
  export default {
    data() {
      //页面格式化 ctrl+alt+l
      return {
        api:{
            pageUrl:'/solve/getmysolve',
            delUrl:'/solve/deletemysolve',
        },
        problem:[
            
        ],//数据
        true:0,
        error:false,
        dialogVisible:false,
        message:'',
        text:'暂无描述',
        name:'zhan',//项目名称
        slovetext:'暂无解决方案',//解决方案
      }
    },
    mixins: [create],
    created() {
          
          
    },
    methods: {
      //跳转到提交解决方案
      to(){
        this.$router.push('/Slove')
      },
      //跳转到
      go(){
        if(this.slovetext == '暂无解决方案'){
            this.message='该问题还没有解决方案';
            this.error=true;
        }
        else{
          this.$router.push('/ModifySlove')
        }
        
      },
      //返回  
      back(){
        sessionStorage.removeItem('userId2')
        sessionStorage.removeItem('problemId')
        sessionStorage.removeItem('text')
        sessionStorage.removeItem('name')
        sessionStorage.removeItem('sloveId')
        this.$router.push('/Problemview')
      },
      //删除该方案
      remove(){
        if(this.true == 1){
            this.dialogVisible = true;
        }
        else{
            this.message='该问题还没有解决方案';
            this.error=true;
        }
      },
      yes(){
        let formData = {
            solveId: this.problem.id,
        };
        http.delete(`${this.api.delUrl}?${new URLSearchParams(formData).toString()}`).then(res => {
                // console.log(res)
                if (res.data.code == 200) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.$router.push('/Problemview')
                }
                else{
                    this.dialogVisible=false;
                    this.message=res.data.msg;
                    this.error=true;
                }
            }
               
        )
                
      },
      //按钮点击下载
      handle(){
          if(this.problem.url != null){
            if(this.problem.url !='文件url'){
                let url=this.problem.url;
                let link = document.createElement('a');
                link.href=url;
                link.target = '_self';
                link.style.display='none';
                // document.body.appendChild(link);
                link.click()
                // document.body.remove(link);
            }
            else{
                this.message='暂无文件'
                this.error = true
            }
          }
          else{
            this.message='暂无文件'
            this.error = true
          }
         
          
        },
      getList() {
            let formData = {
                userId:sessionStorage.getItem('userId2'),
                problemId:sessionStorage.getItem('problemId'),
            };
            this.text = sessionStorage.getItem('text')
            this.name = sessionStorage.getItem('name')
            
            http.get(`${this.api.pageUrl}?${new URLSearchParams(formData).toString()}`).then(res => {
                if(res.data.code == 200){
                    
                    
                    this.problem = res.data.data
                    this.slovetext=this.problem.solveDesc
                    this.true=1
                    sessionStorage.setItem('sloveId',this.problem.id)

                }
               
                console.log(this.problem.id)
            })
        },
       
      
     
      
  
    },
   
  };
  </script>
  
  <style scoped>
  .item-1 ::v-deep .el-divider {
    height: 40px; /* 设置为所需的高度 */
    margin-left: 200px;
  }
  .item-2 ::v-deep .el-divider {
    height: 100px; /* 设置为所需的高度 */
    margin-left: 200px;
  }
  .item ::v-deep .el-divider {
    height: 50px; /* 设置为所需的高度 */
    margin-left: 200px;
  }
  .item-3 ::v-deep .el-divider {
    height: 200px; /* 设置为所需的高度 */
    margin-left: 200px;
  }
  .notitle{
      color: black;
      font-size:25px;
      margin-top: 1%; 
      margin-left: 0%;
    }/* 面包屑 */
  
  
  .item-1 >>> .el-form-item__label {
    font-size: 20px;
    
  }
  .item-2 >>> .el-form-item__label {
    font-size: 20px;
    /* font-weight: bold */
  }
  .item-1{
      margin-left: 250px;
      margin-top: 10px;
      margin-bottom: 40px;
      height: 10px;
  }
  .item-2{
      margin-left: 250px;
      margin-top: 20px;
      height: 100px;
      /* width: 600px;
      height: 100px; */
  }
  .item-3{
    display: flex;
    align-items: center; /* 在垂直方向上居中 */
    margin-left: 250px;
    margin-top: 50px;
  }
  .item{
      display: flex; 
      margin: 20px 0 0 250px
  }
  .input{
      margin-left: 20px;
      width: 500px;
      height: 20px ;
  }
  .select{
      margin-left: 30px;
  }
  
  .change-1{
       margin-left: 150px;
       width: 150px;
       height: 40px;
  }/* 按钮 */
  .change-2{
       margin-left: 12%;
       margin-right: 0;
       margin-top: 50px;
       width: 120px;
  }/* 按钮 */
  .change-3{
       margin-left:20px;
       margin-right: 0;
       margin-top: 50px;
       width: 120px;
       
  }/* 按钮 */
  .change-4{
       margin-left: 20px;
       margin-right: 250px;
       margin-top: 50px;
       width: 120px;
  }/* 按钮 */

   /*.container {
    display: flex;
    justify-content: space-between; 
   

    align-items: center; 
    
  }*/
  
  
  .clearfix{
    margin-right: 125px;
    display: block;
  }
  .clearfix-2{
    margin-left: 20px;
    display: block;
  }

  .limit{
    font-size: 20px;
    margin-left: 150px;
    height: 250px;
    width: 600px;
    word-wrap: break-word;
    line-height: 1.6; /* 调整每行高度 */
    overflow-y: auto;
    
  }
  </style>